<template>
    <view class="container">
        <view class="container__process flex justify-between items-center">
            <view class="px-20 pr-30">
                <text class="fw-600">{{currentIndex+1}}</text>/{{question.length}}
            </view>
            <uv-line-progress :percentage="(currentIndex+1)/question.length*100" active-color="#8072e4"
                :show-text="false"></uv-line-progress>
            <view class="pl-30 flex items-center">
                <uv-count-down :time="30*60*60*1000" format="HH:mm:ss"></uv-count-down>
                <view class="px-20">
                    <uv-icon name="info-circle"></uv-icon>
                </view>
            </view>
        </view>
        <view class="container__content question">
            <view class="rounded-10 bgc-dddddd question__type">{{currentQuestion.type==='1'?'单选题':'多选题'}}·A型题
            </view>
            <view class="question__title py-20 fw-600">{{currentQuestion.title}}</view>
            <view class="question__items">
                <!-- 单选 -->
                <uv-radio-group v-if="currentQuestion.type==='1'" v-model="currentQuestion.selected" placement="column"
                    iconPlacement="right" activeColor="#8472e5" labelSize="17" inactiveColor="#f6f7fb" size="20">
                    <uv-radio :label="item.num+'.'+item.name" :name="item.num"
                        v-for="(item,index) in currentQuestion.options" :key="index"
                        :customStyle="{background:'#fff',marginBottom:'30rpx',padding:'20rpx',borderRadius:'20rpx'}"
                        inactiveColor="#dfe2fc"></uv-radio>
                </uv-radio-group>
                <!-- 多选-->
                <uv-checkbox-group v-if="currentQuestion.type==='2'" v-model="currentQuestion.selected"
                    placement="column" iconPlacement="right" activeColor="#8472e5" labelSize="17"
                    inactiveColor="#f6f7fb" size="20" shape="circle">
                    <uv-checkbox :label="item.num+'.'+item.name" :name="item.num"
                        v-for="(item,index) in currentQuestion.options" :key="index"
                        :customStyle="{background:'#fff',marginBottom:'30rpx',padding:'20rpx',borderRadius:'20rpx'}"
                        inactiveColor="#dfe2fc"></uv-checkbox>
                </uv-checkbox-group>
            </view>
        </view>
        <view class="container__btn flex justify-between">
            <view class="flex-1 px-20">
                <uv-button text="上一题" :color="currentIndex==0?'#b3aaed':'#8172e4'" @click="last"></uv-button>
            </view>
            <view class="flex-1 px-20">
                <uv-button text="下一题" :color="currentIndex==question.length-1?'#b3aaed':'#8172e4'"
                    @click="next"></uv-button>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
    import { computed, ref } from 'vue';

    let currentIndex = ref(0);//当前答题数
    const question = [
        { id: 1, title: '如果你的老板，你会觉得解雇忠诚但绩效不佳的员工是件难事？', type: '1', selected: [], options: [{ num: 'A', name: '如鱼之游在波' }, { num: 'B', name: '泛泛乎万物有余' }, { num: 'C', name: '如鱼之游在波' }, { num: 'D', name: '蛰虫周密' }] },
        { id: 2, title: '如果你的老板，你会觉得解雇忠诚但绩效不佳的员工是件难事2？', type: '2', selected: [], options: [{ num: 'A', name: '如鱼之游在波' }, { num: 'B', name: '泛泛乎万物有余2' }, { num: 'C', name: '如鱼之游在波' }, { num: 'D', name: '蛰虫周密' }] }
    ]
    const currentQuestion = computed(() => {
        return question[currentIndex.value];
    });
    const next = () => {
        if (currentIndex.value == question.length - 1) {
            uni.showToast({
                icon: "none",
                title: "已经是最后一题了"
            })
            uni.navigateTo({
                url: "/pages/task/report"
            })
        } else {
            currentIndex.value += 1;
        }
    }
    const last = () => {
        if (currentIndex.value == 0) {
            uni.showToast({
                icon: "none",
                title: "已经是第一页了"
            })
        } else {
            currentIndex.value -= 1;
        }

    }
</script>
<style scoped lang="scss">
    .container {
        min-height: 100vh;
        background: linear-gradient(to bottom, #ddddfd, #f1f3ff);

        &__process {
            background-color: #fff;
            padding: 20rpx;
        }

        &__btn {
            background-color: #fff;
            position: fixed;
            bottom: 0;
            width: 100%;
            padding: 20rpx;
            box-sizing: border-box;
        }
    }

    .question {
        padding: 30rpx;

        &__type {
            display: inline-block;
            background-color: #dad5f3;
            padding: 10rpx 15rpx;
        }
    }
</style>